<template>
	<cl-crud ref="Crud">
		<cl-row>
			<!-- 刷新按钮 -->
			<cl-refresh-btn />
			<!-- 删除按钮 -->
			<cl-multi-delete-btn />
			<cl-filter label="记录保存天数">
				<el-input-number
					v-model="day"
					controls-position="right"
					:max="10000"
					:min="1"
					@change="saveDay"
				/>
			</cl-filter>
			<cl-flex1 />
			<!-- 关键字搜索 -->
			<cl-search-key placeholder="搜索房间号、房主id" />
		</cl-row>

		<cl-row>
			<!-- 数据表格 -->
			<cl-table ref="Table" />
		</cl-row>

		<cl-row>
			<cl-flex1 />
			<!-- 分页控件 -->
			<cl-pagination />
		</cl-row>

		<!-- 新增、编辑 -->
		<cl-upsert ref="Upsert" />
	</cl-crud>
</template>

<script lang="ts" name="game-info" setup>
import { useCrud, useTable, useUpsert } from '@cool-vue/crud';
import { router, useCool } from '/@/cool';
import { ref } from 'vue';
import { ElMessage } from 'element-plus';
const { service } = useCool();
// 天数
const day = ref(1);
// cl-table
const Table = useTable({
	columns: [
		{ type: 'selection' },
		{ label: '房间号', prop: 'roomNumber' },
		// { label: '房主id', prop: 'ownerId' },
		{ label: '房主头像', prop: 'ownerAvatar' },
		{ label: '房主昵称', prop: 'ownerNickname' },
		// { label: '成员id', prop: 'memberId' },
		{ label: '成员头像', prop: 'memberAvatar' },
		{ label: '成员昵称', prop: 'memberNickname' },
		{ label: '更新时间', prop: 'updateTime' },
		{ label: '创建时间', prop: 'createTime', sortable: 'desc' },
		{
			type: 'op',
			buttons({ scope }) {
				return [
					{
						label: '游戏记录',
						onClick() {
							// router.push({
							// 	path: '/game/record',
							// 	query: {
							// 		id: scope.row.id,
							// 		title: scope.row.nickName
							// 	}
							// });
						}
					},
					'delete'
				];
			}
		}
	]
});

// cl-crud
const Crud = useCrud(
	{
		service: service.game.room
	},
	app => {
		app.refresh();
	}
);
// 保存天数
function saveDay() {
	service.game.room
		.setKeep({ value: day.value })
		.then(() => {
			ElMessage.success('保存成功');
		})
		.catch(err => {
			ElMessage.error(err.message);
		});
}
// 刷新
function refresh(params?: any) {
	Crud.value?.refresh(params);
}
</script>
